<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
    <!--    引入axios.js-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        {{query.cityNames}} <br>
        {{query.starNames}} <br>
        {{query.brandNames}}
        <hr>
        <input type="text" v-model="query.keyword">  &nbsp;&nbsp;&nbsp;&nbsp; <button @click="search">搜索</button>
        <br>

        城市：<span v-for="city in hotelPageVo.cityGroup"> <input type="checkbox" v-model="query.cityNames" :value="city.name"> {{city.name}}({{city.count}}) </span>   <br>
        星级：<span v-for="city in hotelPageVo.starGroup"> <input type="checkbox" v-model="query.starNames" :value="city.name"> {{city.name}}({{city.count}}) </span> <br>
        品牌：<span v-for="city in hotelPageVo.brandGroup"> <input type="checkbox" v-model="query.brandNames" :value="city.name"> {{city.name}}({{city.count}}) </span> <br>

        <div v-for="hotel in hotelPageVo.list">
            <p style="font-size: 30px">{{hotel.name}}</p>
            <p style="font-size: 20px">{{hotel.address}}  &nbsp;&nbsp;&nbsp;&nbsp; ￥{{hotel.price}}</p>
            <span>{{hotel.brand}} -- {{hotel.city}} -- {{hotel.starName}}</span>
            <hr>
        </div>

        总记录数：{{hotelPageVo.total}}
    </div>
</body>
<script>

    let pageNum = location.search.split("=")[1];

    new Vue({
        el:"#app",
        data:{
            query:{
                keyword:"",
                cityNames:[],
                starNames:[],
                brandNames:[]
            },
            hotelPageVo:{
                cityGroup:[{name:"上海",count:"25"},{name:"北京",count:"15"},{name:"杭州",count:"35"}],
                starGroup:[{name:"二钻",count:"25"},{name:"四星级",count:"15"},{name:"五星级",count:"35"}],
                brandGroup:[{name:"7天酒店",count:"25"},{name:"速8",count:"15"},{name:"豪生",count:"35"}],
                list:[
                    {id:1,name:"7天连锁酒店(上海宝山路地铁站店)",address:"静安交通路40号",price:599,brand:"7天酒店",city:"上海",starName:"二钻"},
                    {id:1,name:"北京通州北投希尔顿酒店",address:"新华东街289号2号楼",price:899,brand:"希尔顿",city:"北京",starName:"五钻"}
                ],
                total:""
            }
        },
        methods:{
            search(){
                axios({
                    url:"/hotel/search?pageNum="+pageNum,
                    method:"post",
                    data:this.query
                }).then(resp=>{
                    let hotelPageVo = resp.data;
                    this.hotelPageVo = hotelPageVo;
                });
            }
        },
        mounted(){
            this.search();
        }
    });
</script>
</html>